import '@babel/polyfill';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import gsap from 'gsap';
import * as dat from 'dat.gui';
import VertexShader from '../shader/1/vertex.glsl';
import FragmentShader from '../shader/1/fragment.glsl';

//场景
const scene = new THREE.Scene();

//相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.set(5, 3, 5);
scene.add(camera);

//渲染器
const renderer = new THREE.WebGL1Renderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const params = {
    uWaresFrequency: 20,
    uScale: 0.1,
    uXzScale: 1,
    uNoiseFrequency: 20,
    uNoiseScale: 0.5,
    uLowColor: 0xff0000,
    uHighColor: 0xffff00,
    uXspeed: 1,
    uZspeed: 1,
    uNoiseSpeed: 1,
    uOpacity: 1,
};

//plane
const material = new THREE.ShaderMaterial({
    vertexShader: VertexShader,
    fragmentShader: FragmentShader,
    side: THREE.DoubleSide,
    uniforms: {
        uWaresFrequency: { value: params.uWaresFrequency },
        uScale: { value: params.uScale },
        uNoiseFrequency: { value: params.uNoiseFrequency },
        uNoiseScale: { value: params.uNoiseScale },
        uXzScale: { value: params.uXzScale },
        uTime: { value: 0 },
        uLowColor: { value: new THREE.Color(params.uLowColor) },
        uHighColor: { value: new THREE.Color(params.uHighColor) },
        uXspeed: { value: params.uXspeed },
        uZspeed: { value: params.uZspeed },
        uNoiseSpeed: { value: params.uNoiseSpeed },
        uOpacity: { value: params.uOpacity },
    },
    transparent: true,
})
const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 100, 100), material);
plane.rotateX(-Math.PI / 2);
scene.add(plane);

//gui
const gui = new dat.GUI();
gui.add(params, 'uWaresFrequency').min(0).max(100).step(0.1).onChange((value) => {
    material.uniforms.uWaresFrequency.value = value;
});
gui.add(params, 'uScale').min(0).max(0.2).step(0.01).onChange((value) => {
    material.uniforms.uScale.value = value;
});
gui.add(params, 'uNoiseFrequency').min(0).max(100).step(0.1).onChange((value) => {
    material.uniforms.uNoiseFrequency.value = value;
});
gui.add(params, 'uNoiseScale').min(0).max(1).step(0.01).onChange((value) => {
    material.uniforms.uNoiseScale.value = value;
});
gui.add(params, 'uXzScale').min(0).max(3).step(0.1).onChange((value) => {
    material.uniforms.uXzScale.value = value;
});
gui.addColor(params, 'uLowColor').onChange((value) => {
    material.uniforms.uLowColor.value = new THREE.Color(value);
});
gui.addColor(params, 'uHighColor').onChange((value) => {
    material.uniforms.uHighColor.value = new THREE.Color(value);
});
gui.add(params, 'uXspeed').min(0).max(5).step(0.1).onChange((value) => {
    material.uniforms.uXspeed.value = value;
});
gui.add(params, 'uZspeed').min(0).max(5).step(0.1).onChange((value) => {
    material.uniforms.uZspeed.value = value;
});
gui.add(params, 'uNoiseSpeed').min(0).max(5).step(0.1).onChange((value) => {
    material.uniforms.uNoiseSpeed.value = value;
});
gui.add(params, 'uOpacity').min(0).max(1).step(0.1).onChange((value) => {
    material.uniforms.uOpacity.value = value;
});


//控制
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true;

//坐标轴
//const axesHelper = new THREE.AxesHelper(5);
//scene.add(axesHelper);

//帧动画
const clock = new THREE.Clock();
function animate() {
    const time = clock.getElapsedTime();
    material.uniforms.uTime.value = time;
    orbitControls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};
animate();

//窗口调整侦听
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
});



